import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Steps, Card, Form, Row, Col, Input, Cascader } from 'antd';

const { Step } = Steps;

export default function Firststep() {
  return (
    <PageContainer>
      <Card>
        <Steps progressDot current={1} className="step">
          <Step title="基本信息" />
          <Step className="two" />
          <Step title="活动信息" />
        </Steps>
      </Card>
      <Card>
        <div className="first-desc">请填写活动的基本信息</div>
        <Form>
          <Row>
            <Col span={12}>
              <Form.Item
                className="item"
                label="活动名称"
                name="activityName"
                rules={[
                  {
                    required: true,
                    message: '请输入活动名称',
                  },
                ]}
              >
                <Input placeholder="请输入活动名称" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="地区选择"
                className="item"
                name="area"
                rules={[{ type: 'array', required: true, message: '请选择活动所属地区' }]}
              >
                <Cascader changeOnSelect placeholder="请选择活动所属地区" ></Cascader>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    </PageContainer>
  );
}
